<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../public/jeasyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../public/jeasyui/themes/material/easyui.css">
    <script type="text/javascript" src="../public/jeasyui/jquery.min.js"></script>
    <script type="text/javascript" src="../public/jeasyui/jquery.easyui.min.js"></script>
    <script src="../public/js/jquery.serializejson.min.js"></script>
</head>
<body>
    <a id="btnnews" href="#" class="easyui-linkbutton" onclick="news('news')" >新闻</a>
    <a id="btnpro" href="#" class="easyui-linkbutton" onclick="product('pro')" >产品</a>
    <a id="btnpro" href="#" class="easyui-linkbutton" onclick="" >用户</a>
    <!-- 树形分类 -->
    <ul id="tt"></ul>
    <!-- 右键菜单选项 -->
    <div id="mm" class="easyui-menu" style="width:120px;">
        <div onclick="append()" data-options="iconCls:'icon-add'">append子节点</div>
        <div onclick="Append()" data-options="iconCls:'icon-add'">append同级结点</div>
        <div onclick="remove()" data-options="iconCls:'icon-remove'">remove</div>
        <div onclick="update()" data-options="iconCls:'icon-edit'">edit</div>
        <div class="menu-sep"></div>
        <div onclick="expand()">Expand</div>
        <div onclick="collapse()">Collapse</div>
    </div>
    <!-- 增加的表单 -->
    <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save'" style="width:400px;height:200px;padding:10px">
        <form id="ff" method="post">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="Item1" style="width:100%" data-options="label:'Item1:'">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="Item2" style="width:100%" data-options="label:'Item2:'">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="Item3" style="width:100%" data-options="label:'Item3:'">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="Item4" style="width:100%" data-options="label:'Item4:'">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="Item5" style="width:100%" data-options="label:'Item5:'">
            </div>
        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
        </div>
    </div>

    <!--  更新用的表单 -->
    <div id="dlgChan" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save'" style="width:400px;height:200px;padding:10px">
        <form id="ffChan" method="post">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="Item" style="width:100%" data-options="label:'新名称:',required:true">
            </div>
        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitFormChan()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearFormChan()" style="width:80px">Clear</a>
        </div>
    </div>


    <script>
        var flag=0;
        $('#tt').tree({
            url:'http://localhost:3000/cate/list/news',
            animate: true,
            lines:true,
            onContextMenu: function(e, node){
                e.preventDefault();
                // select the node
                $(this).tree('select',node.target);
                // display context menu
                $('#mm').menu('show', {
                    left: e.pageX,
                    top: e.pageY
                });
            }
        });
        //新闻分类btn
        function news(type){
            $('#tt').tree({
                url:`http://localhost:3000/cate/list/${type}`,
                animate: true,
                onContextMenu: function(e, node){
                    e.preventDefault();
                    // select the node
                    $(this).tree('select',node.target);
                    // display context menu
                    $('#mm').menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    });
                }
            });            
        }
        //产品分类btn
        function product(type){
            $('#tt').tree({
                url:`http://localhost:3000/cate/list/${type}`,
                animate: true,
                onContextMenu: function(e, node){
                    e.preventDefault();
                    // select the node
                    $(this).tree('select',node.target);
                    // display context menu
                    $('#mm').menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    });
                }
            });
        }
        //dialog
        $('#dlg').dialog({
            title: 'dialog',
            width: 400,
            height: 400,
            closed: true,
            cache: false,
            modal: true
        });
        $('#dlgChan').dialog({
            title: 'dialog',
            width: 400,
            height: 200,
            closed: true,
            cache: false,
            modal: true
        });
        //增加一条目录
        function submitForm(){
            $('#ff').form('submit',{
                onSubmit:function(){
                    if($(this).form('enableValidation').form('validate')){
                        var formdata=$("#ff").serializeJSON();
                        var node = $('#tt').tree('getSelected');
                        var itemdata={};//新增结点的数据type,parentId,text
                        for(var i in formdata){
                            if(formdata[i].length>0){
                                console.log('点击的节点,及id: ');
                                console.log(node);
                                console.log(node._id);//id
                                console.log('flag= '+flag);
                                if(flag == 1){//添加child
                                    itemdata.parentId=node._id;  
                                    itemdata.type=node.type;
                                    //console.log('[添加child]新增节点的parentId: '+itemdata.parentId);
                                    //目录上增加
                                    $('#tt').tree('append', {
                                        parent: (node?node.target:null),
                                        data: [{
                                            text: formdata[i]
                                        }]
                                    });
                                    itemdata.text=formdata[i];
                                    // console.log("[添加child]新增节点的信息是：");
                                    // console.log(itemdata);
                                    //数据库增加
                                    $.ajax({
                                        url:'http://localhost:3000/cate',
                                        type:'post',
                                        data:itemdata
                                    }).done(res=>{
                                        $('#dlg').dialog('close');
                                        clearForm();
                                        $('#tt').tree('reload')
                                    });

                                }else if(flag == 0){//添加同级节点
                                    //itemdata.parentId=null;
                                    itemdata.type=node.type;
                                    //目录上增加
                                    if(node.parentId == null){//如果是根结点
                                       // itemdata.parentId = null;
                                        $('#tt').tree('append', {
                                            parent: null,
                                            data: [{
                                                text: formdata[i]
                                            }]
                                        });
                                    }else{//不是根结点
                                        console.log("[添加同级节点]点击的node的父节点id是：");
                                        console.log(node.parentId);
                                        itemdata.parentId=node.parentId;
                                        var parentNode=$('#tt').tree('getParent',node.target);
                                        itemdata.type=parentNode.type;
                                        //console.log(parentNode);
                                        $('#tt').tree('append', {
                                            parent: parentNode.target,
                                            data: [{
                                                text: formdata[i],
                                                parentId:parentNode._id
                                            }]
                                        });
                                    }
                                    
                                    itemdata.text=formdata[i];
                                    console.log("[添加同级节点]新增节点的信息是：");
                                    console.log(itemdata);
                                    //数据库增加
                                    $.ajax({
                                        url:'http://localhost:3000/cate',
                                        type:'post',
                                        data:itemdata
                                    }).done(res=>{
                                        $('#dlg').dialog('close');
                                        clearForm();
                                        //console.log(res);
                                        $('#tt').tree('reload')
                                    });

                                    //刷新
                                    // $('#tt').tree({
                                    //     url:'http://localhost:3000/cate/list/pro',
                                    //     animate: true,
                                    //     lines:true,
                                    //     onContextMenu: function(e, node){
                                    //         e.preventDefault();
                                    //         // select the node
                                    //         $(this).tree('select',node.target);
                                    //         // display context menu
                                    //         $('#mm').menu('show', {
                                    //             left: e.pageX,
                                    //             top: e.pageY
                                    //         });
                                    //     }
                                    // });
                                    // $.ajax({
                                    //     url:'http://localhost:3000/cate/list/pro',
                                    //     type:'post',
                                    // });
                                }
                                //console.log('flag= '+flag);
                                //flag =0;
                            }
                            itemdata={};
                            //flag = 0;
                        }
                        // $('#tt').tree('reload');
                        // console.log('-----------reload------------');
                        $.ajax({
                            url:'http://localhost:3000/cate/list/pro',
                            type:'post',
                        });
                    }
                }
            });
            // $('#tt').tree('reload');
            // console.log('-----------reload------------');
        };
        //清空增加一个目录时的form表单
        function clearForm(){
            $('#ff').form('clear');
        };
        function clearFormChan(){
            $('#ffChan').form('clear');
        };
        //更新一条目录
        function submitFormChan(){
            $('#ffChan').form('submit',{
                onSubmit:function(){
                    if($(this).form('enableValidation').form('validate')){
                        var formdata=$("#ffChan").serializeJSON();
                        var itemdata={};
                        itemdata.text=formdata.Item;
                        var node = $('#tt').tree('getSelected');
                        // console.log(node);
                        // console.log(formdata);{Item: "冰淇淋"}
                        $.ajax({
                            url:`http://localhost:3000/cate/${node._id}`,
                            type:'put',
                            data:itemdata
                        }).done(res=>{
                            // console.log(res.type);
                            // console.log(formdata);
                            $('#dlgChan').dialog('close');
                            //reload tree
                            //$('#tt').tree('reload',);
                            if(res.type == 'news'){
                                //console.log('news');
                                news('news');
                                
                            }else if(res.type == 'pro'){
                                //console.log('pro');
                                product('pro');

                            }
                            clearFormChan();
                        });
                    }
                }
            });
        }


        //菜单-增加child
        function append(){
            var t = $('#tt');
            var node = t.tree('getSelected');
            $('#dlg').dialog('open');
            flag=1;
        }
        //菜单-增加parent
        function Append(){
            var t = $('#tt');
            //var node = t.tree('getSelected');
            $('#dlg').dialog('open'); 
            flag=0;
        }
        //菜单-删除
        function remove(){
            var node = $('#tt').tree('getSelected');
            
            $('#tt').tree('remove', node.target);

            //$('#tt').tree('reload');

            var id=node._id;
            console.log('删除的节点： ')
            console.log(node);
            //数据库删除
            $.ajax({
                url:`http://localhost:3000/cate/${id}`,
                type:'delete',
            })// .done(res=>{
            //     $('#tt').tree('reload');
            // });
            //
        }
        //菜单-更新
        function update(){
            var node = $('#tt').tree('getSelected');
            $.ajax({
                url:`http://localhost:3000/cate/${node._id}`,
                type:'get',
            }).done(res=>{
                //console.log(res.text);
                $('#dlgChan').dialog('open');
                $('#ffChan').form('load',{
                    Item:res.text
                });
            });  
        }
        //菜单-合并
        function collapse(){
            var node = $('#tt').tree('getSelected');
            $('#tt').tree('collapse',node.target);
        }
        //菜单-展开
        function expand(){
            var node = $('#tt').tree('getSelected');
            $('#tt').tree('expand',node.target);
        }


    </script>
</body>
</html>